<template>
    <!--
        Copyright (c) 2024 Cshoo Org. All Rights Reserved.
        author:杨翼
        date: 2024年5月8日
        description:word list 视图文件
    -->

    <div class="words-list-view">
        <WordCard
                v-for="(word, index) in words"
                :key="index"
                :spell="word.spell"
                :explanation="word.explanation"
        />
    </div>
</template>

<script>
    import { inject } from 'vue';
    import WordCard from '../components/WordCard.vue'

    const modelData = inject('modelData');

    export default {
        components: {
            WordCard
        },
        data() { 
            return {
                words: []
            }
        },
        mounted() {             
            const modelData = inject('modelData'); 
            this.words = modelData.words;
        }
    };
</script>

<style scoped>
    .words-list-view {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
        padding: 16px;
        width: 80%;
    }
</style>